import { res } from '../demoData/tableFiled'
import Store from '../store'
import { getSheetIndex } from '../methods/get'
import luckysheetformula from '../global/formula'
window.initCellTree = function(data, type, op) {
  const file = Store.luckysheetfile[getSheetIndex(Store.currentSheetIndex)]
  const dict = file.dictRenderData[data.c]
  if (!dict || !file.dictCodesData[dict.value1][dict.value2]) return
  setTimeout(function() {
    let res = file.dictCodesData[dict.value1][dict.value2]
    if (!res.length) {
      $('#treeconfiglistDict').empty()
    }
    res.forEach((item) => {
      item.name = item.name || item.itemName
    })
    let left
    let top
    let height
    let width
    if (type == 1) {
      left = $('#luckysheet-input-box').position().left
      top = $('#luckysheet-input-box').position().top
      height = $('#luckysheet-input-box').css('height')
      height = parseFloat(height.substring(0, height.length - 2))
      width = data.width
    } else {
      let obj = document
        .getElementById('luckysheet-cell-selected')
        .getBoundingClientRect()
      left = obj.left
      top = obj.top - 4
      height = obj.height
      width = obj.width - 8
    }

    const protectionModalHtml = `
    <div id="luckysheet-modal-dialog-tree-cellTree" class="luckysheet-modal-dialog-slider luckysheet-modal-dialog-slider-pivot" style="max-height:300px;display:none;background: #fff;overflow-x:hidden;overflow-y: auto;">
      <div id="treeconfiglistDict" class="luckysheet-modal-dialog-slider-content ztree" style="margin: 10px;padding-bottom:10px"></div>
    </div>`
    $('body')
      .first()
      .append(protectionModalHtml)
    let p = $('#luckysheet-modal-dialog-tree-cellTree')
    top = top == '-10000' ? 0 : top
    p.css({
      top: top + height + 4 + 'px',
      left: left + 'px',
      width: width + 8 + 'px',
    })
    $('#luckysheet-modal-dialog-tree-cellTree').show()

    const setting = {
      edit: {
        enable: true,
        showRemoveBtn: false,
        showRenameBtn: false,
      },
      data: {
        keep: {
          parent: true,
          leaf: true,
        },
        simpleData: {
          enable: true,
          idKey: 'id',
          pIdKey: 'parentId',
        },
      },
      view: {
        selectedMulti: false,
      },
      callback: {
        onClick: function(event, id, node) {
          window.luckysheet.exitEditMode()
          event.stopPropagation()
          luckysheetformula.updatecell(data.r, data.c, {
            m: node.name,
            v: node.name,
          })
          closeProtectionModal()
        },
      },
    }
    $.fn.zTree.init($('#treeconfiglistDict'), setting, res)
    addFunc()
  }, 50)
}

function addFunc() {
  $('#treeconfiglistDict').on('click', function() {
    event.stopPropagation()
  })
  $('body').on('click', function() {
    closeProtectionModal()
  })
}

function getActiveData(nodeData) {
  let v = ''
  const value = nodeData?.value
  const foo = (arr, ac) => {
    arr.forEach((item) => {
      if (item.value === value) {
        v = ac.value ? ac.value + '.' + value : value
      } else if (item.children) {
        foo(item.children, item)
      }
    })
  }
  foo(res.data, {})
  window.activeTreeData = nodeData
  window.activeTreeData.acValue = v
}

function closeProtectionModal() {
  // $('#dataconfigmouseFnc').jstree('destroy');
  $('#luckysheet-modal-dialog-tree-cellTree').hide()
}
